<template>
    <view class="indexs">
        <view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
            <view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
                <view class="index_h_cont3">
                    <view class="index_wenben_img" @tap="jumpzuo">
                        <image :src="imgUrl+'/dzx_img22.png'" mode="widthFix"></image>
                    </view>
                    <view class="index_wenben baise">{{ $t('page_my_cupponcenter.coupon_center') }}</view>
                </view>
            </view>
            <view class="coloe_title">s</view>
        </view>
        <view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 130rpx;'">
            <view class="my_pinzhenglist_center">
                <view class="index_swiper">
                    <!--Tab布局-->
                    <view class="index_title">
                        <block v-for="(item, index) in malllist" :key="index">
                            <view :data-id="item.id" :class="'mall_dis ' + (currentIndex == index ? 'mall_on' : '')" @tap="getcurrentid">
                                <view class="mall_t1">{{ item.name }}</view>
                            </view>
                        </block>
                        <view class="mys_xians_po" :style="'width:' + width + 'px;left:' + left + 'px;'">
                            <view class="mys_xians"></view>
                        </view>
                    </view>
                    <!--内容布局-->
                    <view class="index_list">
                        <swiper class="swiper paid_list_cont" @change="pagechange" :current="currentIndex" :style="'height:' + height + ';'">
                            <block v-for="(item, index) in malllist" :key="index">
                                <swiper-item>
                                    <view :class="'index_list_heji' + index">
										<view class="my_yhq_list" v-if="cupponlist.length !=0">
												<view class="my_yhq_cont" v-for="(item, index) in cupponlist" :key="index" :style="item.state.value==''?'filter: grayscale(1)':''">
												  <image :src="imgUrl+'/dzx_img139.png'" v-if="item.color.value==10"></image>
												  <image :src="imgUrl+'/dzx_img139.png'" v-if="item.color.value==20" style="filter: hue-rotate(100deg);"></image>
												  <image :src="imgUrl+'/dzx_img139.png'" v-if="item.color.value==30" style="filter: hue-rotate(20deg);"></image>
												  <image :src="imgUrl+'/dzx_img139.png'" v-if="item.color.value==40" style="filter: hue-rotate(200deg);"></image>
												  <view class="my_yhq_cont_txt">
													<view class="my_yhq_cont_l">
													  <view class="my_yhq_cont_t1">{{item.name}}</view>
													  <view class="my_yhq_cont_t2" style="margin-left: 24rpx;">{{ $t('page_my_cupponcenter.only_available_some_channels') }}</view>
													  <view class="my_yhq_cont_t3" v-if="item.expire_type==20">{{ $t('page_my_cupponcenter.Valid_until') }} {{item.start_time.text}}-{{item.end_time.text}}</view>
													  <view class="my_yhq_cont_t3" v-if="item.expire_type==10">{{ $t('page_my_cupponcenter.day',{num:item.expire_day}) }}</view>
													</view>
													<view class="my_yhq_cont_r">
													  <view class="my_yhq_cont_t4" v-if="item.coupon_type.value==20">{{item.discount}}{{ $t('page_my_cupponcenter.zhe') }}</view>
													  <view class="my_yhq_cont_t4" v-if="item.coupon_type.value==10">{{price_mode.unit}}{{item.reduce_price}}</view>
													  <view class="my_yhq_cont_t2">{{ $t('page_my_cupponcenter.keyong',{price:item.min_price}) }} </view>
													  <view :data-coupon-id="item.coupon_id" class="my_yhq_cont_t5" v-if="item.state.value==1" @tap="receive">{{ $t('page_my_cupponcenter.Click_collect') }}</view>
													  <view class="my_yhq_cont_t5" v-if="item.state.value==''"><text>{{item.state.text}}</text></view>
													</view>
												  </view>
												</view>
										</view>
				  
                                        <view class="my_yhq_kong" v-else>
                                            <image :src="imgUrl+'/dzx_img142.png'"></image>
                                            <text>{{ $t('page_my_cupponcenter.coupon_center') }}</text>
                                        </view>
                                    </view>
                                </swiper-item>
                            </block>
                        </swiper>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
let request = require('../../../utils/require');
export default {
    data() {
        return {
            navH: app.globalData.navHeight,
            gaodu: app.globalData.height,
            gaodutops: app.globalData.top,
			imgUrl:app.globalData.imgUrl,
			price_mode:uni.getStorageSync('price_mode'),
            malllist: [
                {
                    id: 0,
                    name: this.$t("page_my_cupponcenter.manjian")
                },
                {
                    id: 1,
                    name: this.$t("page_my_cupponcenter.zhekou")
                },
                {
                    id: 2,
                    name: this.$t("page_my_cupponcenter.renwu")
                }
            ],
            height: 0,
            heights: 0,
            currentIndex: 0,
            left: 16,
            false: false,
            width: 0,
			cupponlist:[],
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad() {
        var that = this;
        that.changeline();
    },
    onShow() {
        var that = this;
		that.getCouponList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
		  /**
		   * 获取优惠券列表
		   */
		  getCouponList: function() {
		    var that = this;
			var data = {
			    token: uni.getStorageSync('token'),
				coupon_type: this.currentIndex
			};
			request.get(`index.php?s=/api/coupon/lists&wxapp_id=` + uni.getStorageSync('web_id'), data).then((result) => {
				console.log(result.data.data.list,888)
		      that.cupponlist = result.data.data.list
			  setTimeout(()=>{
			  	that.swiperhegiht(that.currentIndex);
			  },300)
		    });
		  },
		   /**
		     * 立即领取
		     */
		    receive: function(e) {
				console.log(e,645)
		    var that = this;
			var couponId = e.currentTarget.dataset.couponId;
			var data = {
			    token: uni.getStorageSync('token'),
				coupon_id: couponId,
			};
			request.post(`index.php?s=/api/user.coupon/receive&wxapp_id=` + uni.getStorageSync('web_id'), data).then((result) => {
		        uni.showToast({
		        	title:result.data.msg
		        })
		        // 获取优惠券列表
		        that.getCouponList();
		      });
		  
		    },
		
        //swiper切换时会调用
        pagechange: function (e) {
            var that = this;
            that.swiperhegiht(e.detail.current);
            that.changeline();
			that.getCouponList();
        },

        //swiper单击事件
        getcurrentid(e) {
			console.log(e,6543)
            this.currentIndex = e.currentTarget.dataset.id
			console.log(this.currentIndex,5444)
        },

        //swiper选项卡的高度
        swiperhegiht(es) {
			console.log(es,6544)
            var that = this;
            var query = uni.createSelectorQuery();
            query.selectAll('.index_list_heji' + es).boundingClientRect();
            query.exec((res) => {
				console.log(res,"65675323456")
                var listHeight = res[0][0].height;
                that.height = listHeight + 'px'
                that.heights = res[0]
            });
        },

        //下标线左右滑动效果
        changeline: function (e) {
            const query = uni.createSelectorQuery();
            var that = this;
            query.select('.mall_on').boundingClientRect();
            query.exec(function (res) {
                console.log(res, '????');

                if (res[0] != null) {
                    that.left = res[0].left
                    that.width = res[0].width
                } else {
                    that.left = 0
                }
            });
        },

        jumpzuo() {
            uni.navigateBack()
        }
    }
};
</script>
<style>
@import './my_cupponcenter.css';
</style>
